<!-- 个人信息名片
张耕博
8.11 -->
<template>
  <div id="PersonInfor">
    <el-row>
      <el-col>
        <div class="mr_top_bg">
          <div class="opa">
            <img src="../../assets/img/resume/resume_head_bg.png"/>
          </div>
          <div class="mr_headimg">
            <div @click="showDialog()" style="width:135px;margin:0em auto;">
              <ShowImageCard :url="url" :config="config"></ShowImageCard>
            </div>
          </div>
        </div>
        <div class="mr_baseinfo" v-if="isDetial">
          <div class="edit_title">
            <div class="buttons">
              <span>{{personal.real_name}}</span>
            </div>
            <div>
              <i class="el-icon-edit" @click="editInformation()"></i>
            </div>
          </div>
          <div>
            <p>
              <i class="fa fa-briefcase iconstyle"></i>{{personal.end_education}} · {{personal.political}} ·
              <i class="fa fa-text-height iconstyle"></i>{{personal.height}}cm
            </p>
            <p>
              <i class="fa fa-birthday-cake iconstyle"></i>{{personal.birthday}} · {{personal.work_start_date}}
            </p>
            <p class="position">
              <i class="fa fa-user-o iconstyle"></i>
              {{personal.nation}}
              <i class="fa fa-child iconstyle"></i>
              {{personal.sex}} · {{personal.marriage}}
              <i class="fa fa-qq iconstyle"></i>
              {{personal.qq}}
            </p>
            <div class="mr_titles">
              <span class="mr_title_l"></span>
              <span class="mr_title_c">生活居所</span>
              <span class="mr_title_r"></span>
            </div>
            <p class="position">
              <i class="fa fa-home iconstyle"></i>
              {{personal.native_place}}
              <i class="fa fa-home iconstyle"></i>
              {{personal.living}}
            </p>
            <div class="mr_titles">
              <span class="mr_title_l"></span>
              <span class="mr_title_c">自我评价</span>
              <span class="mr_title_r"></span>
            </div>
            <p style="width:80%;margin:0em auto;">
              {{personal.evaluation}}
            </p>
          </div>
        </div>
        <PersonInformationEdit @returnState="getStatus" v-if="isDetial===false"></PersonInformationEdit>
        <el-dialog title="提示" :visible.sync="isShowImgDialog" size="tiny">
          <UploadImageCard :config="configImg" @sendUploadImageResponse="sendUploadImage"
                           :defaultImageUrl="personinfoData.portrait_url"
                           style="margin:0em auto;"></UploadImageCard>
        </el-dialog>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import ShowImageCard from '@/components/common/ShowImageCard'
  import UploadImageCard from '@/components/common/UploadImageCard'
  import PersonInformationEdit from '@/components/setInfo/PersonInformationEdit'

  export default {
    name: 'PersonInfor',
    data () {
      return {
        isShowImgDialog: false,
        isDetial: true,
        url: '',
        configImg: {
          type: 'HeadPortrait',
          width: '150px',
          height: '150px',
        },
        personinfoData: {
          portrait_url: '',
        },
        config: {
          width: '135px',
          height: '135px'
        },
        personal: {},
      }
    },
    created () {
      this.getPersonInfo()
    },
    methods: {
      showDialog () {
        this.isShowImgDialog = true
      },
      sendUploadImage (data) {
        if (data.status === 0) {
          this.personinfoData.portrait_url = data.portrait_url
          this.isShowImgDialog = false
          this.getPersonInfo()
        } else {
          this.$message.error(data.message)
        }
      },
      getStatus (paramer) {
        if (paramer === true) {
          this.isDetial = true
          this.getPersonInfo()
        } else {
          this.isDetial = true
        }
      },
      editInformation () {
        this.isDetial = false
      },
      formatData () {
        let _this = this
        _this.personal.sex = `${getStaticMapList('sex', _this.personal.sex)}`
        _this.personal.end_education = `${getStaticMapList('education', _this.personal.end_education)}`
        _this.personal.political = `${getStaticMapList('political', _this.personal.political)}`
        _this.personal.marriage = `${getStaticMapList('marriage', _this.personal.marriage)}`
      },
      getPersonInfo () {
        let _this = this
        postDataToServer('PERSONAL_GET').then((data) => {
          if (data.status === 0) {
            _this.personal = data.data_list
            _this.formatData()
            if (!data.data_list.portrait_url) {
              _this.url = undefined
            } else {
              _this.url = data.data_list.portrait_url
            }
          }
        })
      }
    },
    components: {
      PersonInformationEdit,
      ShowImageCard,
      UploadImageCard
    }

  }
</script>
<style scoped>
  /*头部样式*/
  .mr_top_bg {
    text-align: center;
    background: #fafafa;
    height: 170px;
    padding-bottom: 20px;
  }

  .mr_top_bg .mr_headimg {
    margin-top: -135px;
    z-index: 1000;
  }

  .mr_top_bg .opa {
    z-index: 1;
  }

  /*个人信息样式*/
  .edit_title {
    width: 100%;
  }

  .edit_title div {
    display: inline;
  }

  .edit_title i {
    color: #105AB9;
    cursor: pointer;
  }

  .buttons {
    margin: 0em auto;
  }

  .buttons span {
    font-size: 1.5em;
    color: #9FA19F;
  }

  .mr_baseinfo {
    background-color: #fafafa;
    text-align: center;
    padding-bottom: 0.8em;
    font-size: 18px;
    min-height: 500px;
  }

  .mr_baseinfo p {
    margin: 0.8em auto;
    color: #636363;
  }

  .mr_baseinfo .mr_intro {
    margin-bottom: 1.3em;
    font-size: 18px;
    color: #444;
  }

  .mr_baseinfo span {
    margin: 0px 15px;
  }

  .iconstyle {
    color: #999;
    margin-right: 5px;
  }

  .position i {
    margin-left: 15px;
  }

  /*中间标题的样式*/
  .mr_head_l {
    float: left;
  }

  .mr_titles {
    position: relative;
    margin: 2em auto 1em;
  }

  .mr_titles .mr_title_l {
    width: 260px;
    height: 0;
    border-top: 1px solid #ededed;
  }

  .mr_titles .mr_title_c {
    font-size: 18px;
    color: #999999;
    padding: 6px 24px;
    text-align: center;
    background-color: #eee;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    border-radius: 26px;
    margin: 0 13px;
  }

  .mr_titles .mr_title_r {
    width: 260px;
    height: 0;
    border-top: 1px solid #ededed;
  }

  .mr_titles span {
    vertical-align: middle;
    display: inline-block;
  }
</style>
